import React, { Component , Suspense, Router, Routes} from 'react'
import {useRoutes, NavLink} from 'react-router-dom'

import { Layout  } from 'antd';
import MenuComponent from './components/Menu'
import Navigation from './components/Navigation'
import MyFooter from './components/MyFooter'
import MyEmpty from './components/MyEmpty';

import routers from './routes'

import('./App.css')

const { Header, Footer, Sider, Content } = Layout;

export default function App() {
const router = useRoutes(routers);
  return (
    <Layout>
        <Header>
          <Navigation />
        </Header>
        <Layout>
          <Sider>
              <MenuComponent />
          </Sider>
          <Layout>
            <Content>
                <Suspense  fallback={<MyEmpty />}>
                  {router}
                </Suspense >
            </Content>
            <Footer>
              <MyFooter />
            </Footer>
          </Layout>
        </Layout>
    </Layout>
  )
}

